import React, { useContext } from 'react';
import { QuickCodeContext } from './context';
import { useDrag, useDrop } from 'react-dnd';
import { DesignFrameworkContext } from '../design/context';

const QuickCodeRender = ({ schema }: any) => {
 
  const { registerComponents, ItemRender } = useContext(QuickCodeContext)
  const { moveItemById } = useContext(DesignFrameworkContext)
  console.log({ ItemRender, registerComponents, schema, moveItemById })

  return (<div>
    {schema.children?.map((item, originalIndex) => {
      let RcComponent: any 
      let ChildrenWrap: any 
      if (item.component) {
        RcComponent = registerComponents[item.component];

      }
      if(schema.childrenWrap){
        ChildrenWrap =  registerComponents[schema.childrenWrap];
      }
      if (item.children) {
        if (RcComponent) {
          if (ItemRender) {
            return <ItemRender    item={item} key={item.id}>
              <RcComponent ><QuickCodeRender  schema={item} /></RcComponent>
            </ItemRender>
          }
          // return <RcComponent   key={item.id}><QuickCodeRender schema={item} /></RcComponent>
        }
        // return <QuickCodeRender key={item.id} schema={item} />
      }
      if (ItemRender) {
        // if(ChildrenWrap){
        //   return  <ChildrenWrap key={item.id}><ItemRender    item={item}>
        //   <RcComponent  item={item} />
        // </ItemRender></ChildrenWrap>
        // }
        return<ItemRender    item={item} key={item.id}>
          <RcComponent  item={item} />
        </ItemRender>
      }
      //<Item moveItemById={moveItemById} item={item} key={item.id}>{item.id}</Item>
      // return <RcComponent item={item}  key={item.id}/>
    })}
  </div>)
}
export default QuickCodeRender